<script setup lang="ts">
import { defineProps } from "vue";
import jdt from "@/components/jdt.vue";
import { numberToEncoded } from "@/utils/numbers";
defineProps({
  title: {
    type: String,
  },
  value: {
    type: Number,
  },
  valueColor: {
    type: String,
    default: "#fff",
  },
  duration: {
    type: Number,
    default: 3,
  },
  color: {
    type: Array,
    default: ["#05f5f500", "#00bfff50", "#00bfff"],
  },
  height: {
    type: Number,
    default: 10,
  },
  icon: {
    type: String,
    default: "",
  },
});
</script>
<template>
  <div class="itemsContainer">
    <div class="itemIcon" :style="{ backgroundImage: `url(${icon})` }"></div>
    <div class="itemContent">
      <div class="subject">
        <div class="title">{{ title }}</div>
        <div class="value" :style="{ color: valueColor }">
          {{ numberToEncoded(value) }}<span class="danwei">万元</span>
        </div>
      </div>
      <div>
        <jdt :duration="duration" :color="color" :height="height"></jdt>
      </div>
    </div>
  </div>
</template>
<style scoped>
.itemsContainer {
  width: 100%;
  display: flex;
  gap: 5px;
}
.itemIcon {
  width: 40px;
  height: 40px;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.itemContent {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.subject {
  display: flex;
  justify-content: space-between;
}
.danwei {
  font-size: 12px;
  color: #fff;
}
.title {
  font-size: 14px;
  color: #fff;
}
.value {
  font-size: 20px;
}
</style>
